<template>
	<view class="bg-white flex flex-direction" style="height: 100vh; width: 100vw;" :style="[{paddingTop: StatusBar + 'px'}]">
		<view style="padding: 32rpx;">
			<text class="cuIcon-close text-black" style="font-size: 50rpx; font-weight: bold;" @click="back"></text>
		</view>
			
		<view style="padding: 32rpx; font-size: 50rpx; font-weight: bold; color: #000000;">
		       手机登录
		</view>
		<view style="margin-top: 144rpx; padding: 0 32rpx;">
			<view class="flex align-center justify-between solid-bottom" style="height: 104rpx;">
				<view style="width: 100rpx;font-size: 40rpx;">+86</view>
				<input v-model="mobile" type="number" maxlength="11" placeholder="手机号" style="flex:1;font-size: 40rpx;color: #1C1C1E;" placeholder-style="font-size: 40rpx; color: #999999;"/></input>
			    <text v-if="mobile && mobile.length>0" class='cuIcon-roundclose text-gray' @click="mobile=''" style="font-size: 40rpx;"></text>
			</view>
		</view>
		<view style="padding: 0 32rpx; margin-top: 64rpx;">
			<button @click="getCaptcha" :disabled="mobile.length<11" :style="mobile.length<11? {opacity: 0.5}:''" 
			style=" height: 96rpx; color: white; background-color: #007AFF; border-radius: 8rpx;font-size: 36rpx;">
			获取短信验证码</button>
		</view>
	</view>	
</template>

<script>
	export default{
		data() {
			return {
				mobile: '',		
			}
		},
		methods:{
			getCaptcha(){
				var reg=/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
				if(!reg.test(this.mobile)){
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					})
					return false;
				}
				else{
					this.$http.post(`/ucenter/sendMsm/${this.mobile}`).then((res)=>{
						console.log(res)
						if(res.data.success){
							this.$Router.push({name:'captcha',params:{mobile:this.mobile}})
						}
					})

				}
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}	
</script>

<style>
</style>
